<template>
  <div id="Login">
    <div class="banner">
      <div class="banner-title unSelect">{{ title.main }}</div>
      <div class="banner-subtitle unSelect">{{ title.sub }}</div>
      <div class="login">
        <div class="login-title">用户登录</div>
        <div class="login-box">
          <el-form ref="logIn" :model="form.logIn" :rules="rules.logIn">
            <el-form-item label="邮箱 或 手机号 / Email or Phone">
              <el-input type="text" v-model="form.logIn.phoneOrName" placeholder="请输入手机号或邮箱" autofocus @change="formatInput"></el-input>
            </el-form-item>
            <el-form-item label="密码 / Password">
              <el-input type="password" v-model="form.logIn.password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-btn">
          <el-button type="primary" style="width: 100%" @click="toLogIn">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logIn } from '../../api/login/index'
import { getToken, setToken, getUserRole, setUserRole, setUID } from '../../utils/auth'
import setting from '../../setting'
export default {
  name: 'Login',
  data() {
    return {
      title: {
        main: this.$store.state.appName,
        sub: '***有限公司',
      },
      form: {
        logIn: {
          phoneOrName: '',
          password: '',
        },
      },
      rules: {
        logIn: {
          phoneOrName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        },
      },
    }
  },
  computed: {},
  methods: {
    changeLoginType(type) {
      this.nav.active = type
      if (type === 'email') {
        this.$refs.loginWithPhoneRef.resetFields()
      } else {
        this.$refs.loginWithEmailRef.resetFields()
      }
    },
    toLogIn() {
      this.$refs.logIn.validate(async valid => {
        if (valid) {
          const data = await logIn({ parameters: this.form.logIn })
          if (data && data.result !== 0) {
            this.$message.error(data.describe)
          } else {
            switch (data.role) {
              case 0:
                this.$message.success(`你好，系统管理员 ${this.form.logIn.phoneOrName}！`)
                break
              case 1:
                this.$message.success(`你好，项目管理员 ${this.form.logIn.phoneOrName}！`)
                break
              case 2:
                this.$message.success(`你好，技术管理员  ${this.form.logIn.phoneOrName}！`)
                break
              case 3:
                this.$message.success(`你好，测量管理员  ${this.form.logIn.phoneOrName}！`)
                break
              case 4:
                this.$message.success(`你好，${this.form.logIn.phoneOrName}！`)
                break
            }
            setToken(data.resultContent.token)
            setUserRole(data.resultContent.role)
            setUID(data.resultContent.userId)
            // this.$store.commit('setUserInfo', {
            //   account: this.form.logIn.phoneOrName
            // })
            this.$router.push({ name: setting.publicMainPage })
          }
        }
      })
    },
    autoLogin() {
      if (getToken() !== undefined && getUserRole() !== undefined) {
        this.$router.push({ name: setting.publicMainPage })
      }
    },
    formatInput() {
      this.form.logIn.phoneOrName = this.form.logIn.phoneOrName.trim()
    },
  },
  mounted() {
    this.autoLogin()
    window.onkeyup = e => {
      if (e.keyCode === 13) {
        this.toLogIn()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
#Login {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);

  .banner {
    width: 100%;
    height: 400px;
    position: relative;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    backdrop-filter: blur(5px);
    background: linear-gradient(to top, #09203f 0%, #537895 100%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    .banner-title {
      position: absolute;
      left: 10%;
      top: 20%;
      font-size: 65px;
      color: #fff;
    }

    .banner-subtitle {
      position: absolute;
      left: 10%;
      top: 65%;
      font-size: 30px;
      color: #fff;
    }

    .login {
      width: 400px;
      // height: 120%;
      position: absolute;
      right: 10%;
      top: 50%;
      color: #606266;
      transform: translateY(-50%);
      background: #fff;
      backdrop-filter: blur(10px);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      padding: 15px;

      .login-title {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        font-size: 28px;
        font-weight: bold;
      }

      .login-box {
        width: 100%;
      }

      .login-btn {
        width: 100%;
        margin-bottom: 15px;
      }

      .login-link {
        width: 100%;
        display: flex;
        justify-content: space-between;

        & > a {
          color: #09203f;
        }
      }
    }
  }
}
</style>
